@require "../../../css/variables.styl"
@require "../../../css/mixin.styl"

.va-df-form.va-df-form-inline .va-df-input-counter input
  width inherit

.va-df-input-control.va-df-input-counter
  padding 0


.va-df-input-counter
  position relative
  display inline-block
  &[disabled], &.disabled
    input, div
      cursor not-allowed
    div
      background transparent
  &:hover:not([disabled]):not(.disabled)
    input
      border-color $color-df-input-border-focus

  input
    f-border($color-df-input-border)
    form-control-focus()
    height $height-df-input-default
    width 100%
    line-height 1.5
    min-width $width-df-number-opt-btn * 2 + 40px
    padding 6px $width-df-number-opt-btn
    text-align center
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s


  >div
    border-radius 0 !important
    outline none !important
    background none !important
    cursor pointer
    background #fff
    &[disabled], &.disabled
      cursor not-allowed
      color $color-df-input-placeholder
    &:focus
      outline none
    position absolute
    top 0
    height $height-df-input-default
    width $width-df-number-opt-btn
    line-height $height-df-input-default
    padding 0
    vertical-align middle
    border none

    &.va-df-input-counter-left
    &.va-df-input-counter-right
      text-align center
      user-select none

    &.va-df-input-counter-left
      border-right solid 1px $color-df-input-border
      left 0

    &.va-df-input-counter-right
      border-left solid 1px $color-df-input-border
      right 0
